<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件详解</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./highlight/styles/agate.css"> 
    <script src="./highlight/highlight.pack.js"></script> 
    <script > hljs.initHighlightingOnLoad();</script>
    <script src="./js/my-pre.js"></script>
</head>

<body>
    <div id="app">
        <h1>
            组件和vue实例相似，有methods，data,computed,等方法，但是没有"el",
            data 需要return出去
        </h1>
        <my-com></my-com>
        <h3>代码如下</h3>
        <my-pre :init-string="string1"></my-pre>

        <hr>
        <h1>父->子组件的数据的传递</h1>
        <h3>v-bind通过init-count把父的值传入到子组件里面去</h3>
        <my-comchild :init-count="count"></my-comchild>
        <my-pre :init-string="string2"></my-pre>
        <hr>

        
        <h3>比如table里不允许有其他如div的元素，这个时候用“is=”</h3>
        <table>
            <tbody is="my-comchild"></tbody>
        </table>
        <my-pre :init-string="string3"></my-pre>
        <hr>
        <h1>组件内容return出的对象引用了外部的一个对象,那这个对象就是共享的,任何一方修改都会同步</h1>
        <my-c2></my-c2>
        <my-c2></my-c2>
        <my-c2></my-c2>
        <my-pre :init-string="string4"></my-pre>
        <br>
        <hr>
        <p>如果定义在子组件里,就不会同时响应了</p>
        <my-c3></my-c3>
        <my-c3></my-c3>
        <my-c3></my-c3>
        <my-pre :init-string="string5"></my-pre>

    </div>
    
    <script>

        //全局注册
        Vue.component('my-com', {
            template: '<div>我是组件内容</div>'
        })
        //局部定义组件
        var Child = {
            props: {
                initCount: String //这里的格式必须要大写第一个字母。方法名：必须是驼峰
            },
            template: '<div>我是局部注册的,这个值“{{message}}”是子组件的变量，而“{{count}}”是从父里传进来的！</div>',
            //data必须要return的格式，而count必须用this的方法来传进来！
            data() {
                return {
                    message: 'hello vue',
                    count: this.initCount
                }
            }
        };
        //定义一个全局变量
        var data = {
            counter: 0
        }

        var C2 = {
            template: '<div><button @click="counter++">{{counter}}++</button></div>',
            data() {
                console.log(data);
                return data;
            }
        }
        //如果定义在子组件里,就不会同时响应了
        var c3= {
            template:'<div><button @click="dd++">{{dd}}</button></div>',
            data :function(){
                return {
                    dd:0
                }
            }
        }

        var app = new Vue({
            el: '#app',
            //注册局部组件
            components: {
                'my-comchild': Child,
                'my-c2': C2,
                'my-c3':c3
            },
            data: {
                count: '我来自父的数据',
                string1:hereDoc(function(){/*
                    模板中
                    <my-com></my-com>
                    js代码
                    Vue.component('my-com', {
                        template: '<div>我是组件内容</div>'
        })

                */}),
                string2:hereDoc(function(){/*
                    模板中, 这里用 :int-count 自定义方法,把父的值传入到子组件中(init-count在组件中定义)
                    
                    <my-comchild :init-count="count"></my-comchild> 

                    js代码

                    //局部定义组件
                    var Child = {
                        props: {
                            initCount: String /传入的数据类型是string,方法名：必须是驼峰
                        },
                        template: '<div>我是局部注册的,这个值“{{message}}”是子组件的变量，而“{{count}}”是从父里传进来的！</div>',
                        //data必须要return的格式，而count必须用this的方法来传进来！
                        data() {
                            return { //必须要renturn 对象.
                                message: 'hello vue',
                                count: this.initCount  //count 接收父来的变量.
                            }
                        }
                    };

                */}),
                string3:hereDoc(function(){/*
                    <table>
                        <tbody is="my-child"></tbody>
                    </table>

                */}),
                string4:hereDoc(function(){/*
                    模板中
                    <my-c2></my-c2>
                    <my-c2></my-c2>
                    <my-c2></my-c2>

                    js 中
                    var data = {
                        counter: 0
                        }

                    var C2 = {
                                template: '<div><button @click="counter++">{{counter}}++</button></div>',
                                data() {
                                    console.log(data);
                                    return data;
                                }
                            }
                */}),
                string5:hereDoc(function(){/*
                 模板中
                    <my-c2></my-c2>
                    <my-c2></my-c2>
                    <my-c2></my-c2>

                    js 中
        var c3= {
            template:'<div><button @click="dd++">{{dd}}</button></div>',
            data :function(){
                return {
                    dd:0  //这个是内部的值
                }
            }
        }
                */})
            },
            methods:{
                
            }

        })
    </script>

</body>

</html>

